<template>
  <div class="list-echarts two">
    <img class="twotopimg" src="../../assets/images/twotop-1.png" alt="">
    <div class="ltitle">学校内机构入驻情况</div>
    <img @click="centershow()" src="../../assets/images/xq.png" alt="" style="z-index: 9999;position: absolute;right: 18px;top: -6px;cursor: pointer;width: 65px!important;height: 34px!important;">
    <div style="display: flex;justify-content: flex-end;margin-top: 25px;padding-bottom: 25px;border-bottom: 1px dashed #50759f;">
      <div id="settlein" style="width: 380px;height: 300px;"></div>
    </div>
    <div style="display: flex;justify-content: flex-end;border-bottom: 1px dashed #50759f;" class="page">
      <div class="pagination" style="width: 435px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="2"
          :page-count="page_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { settleinpost } from '@/api/user.js'
  import * as echarts from "echarts"
  export default {
    name: 'settlein',
    components: {},
    props: ["qyvalue"],
    data() {
      return {
        myBarChart: '',
        page: 1,
        limit: 5,
        page_count: 0,
        list: []
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            this.settleinpostfun()
          }
        }
      }
    },
    created() {
    },
    mounted() {
      this.echart()
    },
    methods: {
      centershow() {
        this.$emit('centershow',3)
      },
      handleSizeChange() {
        this.page = val
        this.settleinpostfun()
      },
      handleCurrentChange(val) {
        this.page = val
        this.settleinpostfun()
      },
      settleinpostfun() {
        var that = this,
        params = {
          page: this.page,
          limit: this.limit,
          school_area_id: this.qyvalue
        }
        settleinpost(params).then(res => {
          this.page_count = res.data.page_count
          this.list = res.data.data
          if (this.page!=1) {
            this.echart()
          } else {
            this.echart()
          }
        })
      },
      echart() {
        let dsiab_com = document.getElementById("settlein")
        dsiab_com.removeAttribute('_echarts_instance_')
        this.myBarChart = echarts.init(dsiab_com);
        // this.myBarChart = echarts.init(document.getElementById('settlein'))
              // 得到的数据
              let seriesData1 = this.list
              // 柱子降序排列
              // seriesData1.sort((a, b) => b.value - a.value)
        
              let xData = []
              seriesData1.forEach((item) => {
                xData.push(item.name)
              })
              // 数据
              let seriesData = []
              seriesData1.forEach((item) => {
                seriesData.push(item.number)
              })
        
              // 颜色组
              let linearArr = [
                '#d89400',
                '#E46F07',
                '#f8bd00',
                '#f8bd00'
              ]
        
              // 绘制左侧面
              const offsetX = 16,
                sliderWidth = 12,
                offsetTick = 16
              const CubeLeft = echarts.graphic.extendShape({
                shape: {
                  x: 0,
                  y: 0,
                },
                buildPath: function (ctx, shape) {
                  // shape是从custom传入的
                  const api = shape.api
                  const xAxisPoint = api.coord([shape.xValue, 0])
                  const c0 = [shape.x - offsetTick, shape.y]
                  const c1 = [shape.x - offsetTick + offsetX, shape.y]
                  const c2 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]
                  const c3 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]
                  ctx
                    .moveTo(c0[0], c0[1])
                    .lineTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .closePath()
                },
              })
              // 绘制右侧面
              const CubeRight = echarts.graphic.extendShape({
                shape: {
                  x: 0,
                  y: 0,
                },
                buildPath: function (ctx, shape) {
                  const api = shape.api
                  const xAxisPoint = api.coord([shape.xValue, 0])
                  const c1 = [shape.x - offsetTick + offsetX, shape.y]
                  const c2 = [
                    shape.x - offsetTick + offsetX + sliderWidth,
                    shape.y - sliderWidth,
                  ]
                  const c3 = [
                    xAxisPoint[0] - offsetTick + offsetX + sliderWidth,
                    xAxisPoint[1] - sliderWidth + 4,
                  ]
                  const c4 = [shape.x - offsetTick + offsetX, xAxisPoint[1]]
                  ctx
                    .moveTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .lineTo(c4[0], c4[1])
                    .closePath()
                },
              })
              // 绘制顶面
              const CubeTop = echarts.graphic.extendShape({
                shape: {
                  x: 0,
                  y: 0,
                },
                buildPath: function (ctx, shape) {
                  const c1 = [shape.x - offsetTick, shape.y]
                  const c2 = [shape.x - offsetTick + offsetX, shape.y] // 右点
                  const c3 = [
                    shape.x - offsetTick + offsetX + sliderWidth,
                    shape.y - sliderWidth,
                  ]
                  const c4 = [shape.x - offsetTick + sliderWidth, shape.y - sliderWidth]
                  ctx
                    .moveTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .lineTo(c4[0], c4[1])
                    .lineTo(c1[0], c1[1])
                    .closePath()
                },
              })
        
              // 注册三个面图形
              echarts.graphic.registerShape('CubeLeft', CubeLeft)
              echarts.graphic.registerShape('CubeRight', CubeRight)
              echarts.graphic.registerShape('CubeTop', CubeTop)
        
              var option = {
                color: ['#ffb900'],
                legend: {
                  itemHeight: 7,
                  itemWidth: 20,
                  data: ['入驻机构数量'],
                  top: 0, //legend距离canvas上面的距离
                  left: 0,
                  textStyle: { //文字颜色
                    fontSize: 12,
                    color: 'white',
                    padding: [0, 3] //文字与图形之间的左右间距
                  },
                  itemGap: 15, //间距
                },
                // grid: {
                //   bottom: '100'
                // },
                tooltip: {
                  trigger:'axis',
                  axisPointer: {
                    type:'shadow',
                    crossStyle: {
                      color:'white'
                    }
                  },
               
                  formatter:function (params) {
                    let firstParams = params[0]
                    return '入驻机构数量' +'<br>' +firstParams.name + ' ：' + firstParams.data;
                  }
                },
                xAxis: {
                  axisTick: {
                    // 不显示坐标刻度
                    show: false,
                  },
                  axisLine: {
                    show: false,
                 },
                  data: xData,
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: "white",
                      // fontSize: 10,
                    },
                    formatter: function(params) {
                      //可自定义设置每行展示的字数，每行n个文字纵向排列
                      let n = 1;
                      let arr = [],newarr=[]
                      for (let i = 0; i < params.length / n; i++) {
                        arr.push(params.substring(n * i, n * (i + 1)));
                      }
                      return arr.join(',').split(",").join("\n")
                      // if (arr.length>7) {
                      //   arr = arr.splice(0,5)
                      //   for (let i = 0; i < 3; i++) {
                      //     arr.push('.')
                      //   }
                      //   newarr = arr.join(',').split(",").join("\n");
                      // } else {
                      //   newarr = arr.join(',').split(",").join("\n");
                      // }
                      // return newarr
                    },
                  },
                },
                yAxis: {
                  type: 'value',
                  minInterval : 1,
                  // 不显示网格
                  splitLine: {
                    show: false,
                  },
                  axisLabel: {//y轴文字的配置
                    textStyle: {
                     color: "white"
                    },
                  },
                  splitLine:{
                     show: true, // X轴线 颜色类型的修改
                     lineStyle: {
                       type: 'solid',
                       color: '#1e3057'
                     }
                   },
                },
                series: [
                  {
                    name: '入驻机构数量',
                    type: 'custom',
                    data: seriesData,
                    itemStyle: {
                      shadowColor: '#000',
                      shadowBlur: 100,
                    },
                    renderItem: function (params, api) {
                      let location = api.coord([api.value(0), api.value(1)])
                      return {
                        type: 'group',
        
                        children: [
                          // 柱子前面
                          {
                            type: 'CubeLeft',
                            // shape 属性描述了这个矩形的像素位置和大小
                            shape: {
                              api,
                              xValue: api.value(0), //表示取出当前 dataItem 中第一个维度的数值
                              yValue: api.value(0),
                              x: location[0],
                              y: location[1],
                            },
                            style: {
                              //柱子阴影
                              shadowColor: '#e09900',
                              shadowOffsetX: 0,
                              shadowOffsetY: 0,
                              shadowBlur: 4,
                              // 颜色
                              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                  offset: 0,
        
                                  color: linearArr[0],
                                },
                                {
                                  offset: 1,
                                  color: linearArr[1],
                                },
                              ]),
                            },
                          },
                          // 柱子侧面
                          {
                            type: 'CubeRight',
                            shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                            },
                            style: {
                              //柱子阴影
                              shadowColor: '#e09900',
                              shadowOffsetX: 0,
                              shadowOffsetY: 0,
                              shadowBlur: 4,
                              //颜色
                              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                  offset: 0,
                                  color: linearArr[2],
                                },
                                {
                                  offset: 1,
                                  color: linearArr[3],
                                },
                              ]), //平面颜色
                            },
                          },
                          // 柱子顶部
                          {
                            type: 'CubeTop',
                            shape: {
                              api,
                              xValue: api.value(0),
                              yValue: api.value(1),
                              x: location[0],
                              y: location[1],
                            },
                            style: {
                              //柱子阴影
                              shadowColor:'#e09900',
                              shadowOffsetX: 0,
                              shadowOffsetY: 0,
                              shadowBlur: 4,
                              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                  offset: 0,
                                  color: linearArr[0],
                                },
                                {
                                  offset: 1,
                                  color: linearArr[1],
                                },
                              ]), //平面颜色
                            },
                          },
                        ],
                      }
                    },
                  },
                ],
              }
              this.myBarChart.setOption(option)
      }
    }
  }
</script>
<style scoped lang="less">
  .two{
    position: relative;
    margin-top: 25px;
    // padding-right: 20px;
    box-sizing: border-box;
    .twotopimg{
      position: absolute;
      left: -10px;
      top: 0;
    }
    .ltitle{
      position: absolute;
      left: 0px;
      top: 0;
      font-size: 18px;
      color: white;
      font-weight: bold;
      writing-mode:vertical-lr;
      letter-spacing: 4px;
    }
    .title{
      width: 320px;
      color: #00e2ff;
      font-size: 14px;
      font-weight: 600;
    }
    .pagination{
      padding: 10px 0;
    }
  }
</style>
